<template>
  <div class="page-wrap1">
    <Head title="发票信息" isBack>
      <template #content>
        <Detail
          :columns="3"
          :form="detailForm"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="收件人信息">
      <template #content>
        <Detail
          :columns="3"
          :form="detailForm1"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="开票结果">
      <template #content>
        <Detail
          v-if="lznt"
          :columns="2"
          :form="detailForm3"
          :detail="data.detailData"
          align="left"
        ></Detail>
        <Detail
          v-else
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="开票订单">
      <template #content>
        <el-tabs v-model="data.activeTab" class="demo-tabs">
          <el-tab-pane label="充电订单" name="charge">
            <Table
              v-if="data.activeTab === 'charge'"
              ref="tableRef"
              :url="URL_PAGINGTICKETRECORDDETAIL"
              :columns="data.columns"
              :params="{ recordId: id, orderType: 0 }"
            >
            </Table>
          </el-tab-pane>
          <el-tab-pane label="超时占用订单" name="occupy">
            <Table
              v-if="data.activeTab === 'occupy'"
              ref="tableWxRef"
              :url="URL_PAGINGTICKETRECORDDETAIL"
              :columns="occupyData.columns"
              :params="{ recordId: id, orderType: 1 }"
            ></Table
          ></el-tab-pane>
        </el-tabs>
      </template>
    </Head>
  </div>
</template>
   
  <script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  ticketGetRecordById,
  URL_PAGINGTICKETRECORDDETAIL,
} from '@/service/apis/financial';
const lznt = import.meta.env.VITE_ENV_TYPE === 'lznt';

const route = useRoute();
const {
  query: { id },
} = route;

const detailForm = reactive([
  {
    label: '申请用户',
    prop: 'createBy',
  },
  {
    label: '电费',
    prop: 'powerAmount',
  },
  {
    label: '服务费',
    prop: 'serviceAmount',
  },
  {
    label: '充电度数',
    prop: 'power',
    dataType: String,
  },
  {
    label: '超时占用',
    prop: 'occupyAmount',
  },
  {
    label: '发票抬头',
    prop: 'companyName',
  },
  {
    label: '税号',
    prop: 'taxNumber',
  },
  {
    label: '发票形式',
    prop: 'ticketType',
    dic: [] as any,
    type: Number,
  },
  {
    label: '开户行名称',
    prop: 'bankName',
  },
  {
    label: '开户行账号',
    prop: 'bankAccount',
  },
  {
    label: '注册地址',
    prop: 'address',
  },
  {
    label: '电话',
    prop: 'telephone',
  },
  {
    label: '申请时间',
    prop: 'createTime',
  },
]);

const detailForm1 = reactive([
  {
    label: '收件人',
    prop: 'recipientName',
  },
  {
    label: '收件地址',
    prop: 'recipientAddress',
  },
  {
    label: '收件电话',
    prop: 'recipientTelephone',
  },
  {
    label: '收件邮箱',
    prop: 'email',
  },
]);

const detailForm2 = reactive([
  {
    label: '开票状态',
    prop: 'status',
    dic: [] as any,
    type: Number,
  },
  {
    label: '开票结果',
    prop: 'reason',
  },
]);

const detailForm3 = reactive([
  {
    label: '开票状态',
    prop: 'status',
    dic: [] as any,
    type: Number,
  },
  {
    label: '开票结果',
    prop: 'reason',
  },
  {
    label: '第三方开票状态',
    prop: 'externalStatusDesc',
    template: (row: any, index: number) => {
      if (row.externalStatusDesc) {
        return row.picUrl
          ? `<div style='display: flex;'>
            ${row.externalStatusDesc}
            <div 
              style='font-size: 12px; color: #fff; cursor: pointer; background: #5073f7;border-radius: 4px; padding: 2px 6px; margin-left: 10px;'
              class='iconfont icon-download download-click'
              data-url='${row.picUrl}'>
              下载发票
            </div></div>`
          : `<div>${row.externalStatusDesc}</div>`;
      } else {
        return '--';
      }
    },
  },
  {
    label: '失败原因',
    prop: 'externalReason',
  },
]);

const data = reactive({
  detailData: {} as any,
  activeTab: 'charge',
  columns: [
    {
      prop: 'orderNum',
      label: '订单号',
    },
    {
      prop: 'powerAmount',
      label: '实付电费',
    },
    {
      prop: 'serviceAmount',
      label: '实付服务费',
    },
    {
      prop: 'power',
      label: '充电度数',
      template: (row: any, index: number) => {
        if (row.power) {
          return row.power;
        } else if (row.power == 0) {
          return String(row.power);
        } else {
          return '--';
        }
      },
      dataType: String,
    },
    {
      prop: 'totalPersonalAmount',
      label: '个人钱包支付',
    },
    {
      prop: 'powerPersonalAmount',
      label: '个人支付电费',
    },
    {
      prop: 'servicePersonalAmount',
      label: '个人支付服务费',
    },
    {
      prop: 'createTime',
      label: '支付时间',
    },
  ],
});
const occupyData = reactive({
  columns: [
    {
      prop: 'orderNum',
      label: '订单号',
    },
    {
      prop: 'occupyAmount',
      label: '占用收费',
    },
    {
      prop: 'occupyPersonalAmount',
      label: '个人钱包支付',
    },
    {
      prop: 'createTime',
      label: '支付时间',
    },
  ],
});

ticketGetRecordById(id).then((res: any) => {
  data.detailData = res;
});

// 下载模板
const downloadTemplate = (url: any) => {
  console.log(111111, url);
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('download', '');
  a.click(); // 自执行点击事件
};

queryDicByParent({ listDtos: ['ticketType', 'ticketRecordStatus'] }).then(
  (res: any) => {
    detailForm[7].dic = [...res.ticketType];
    detailForm2[0].dic = [...res.ticketRecordStatus];
    detailForm3[0].dic = [...res.ticketRecordStatus];
  }
);
</script>
  